<template>
	<el-dialog
		v-model="state.centerDialogVisible"
		title="资金管理"
		width="50%"
		align-center
	>
		<div style="width: 100%;height: 100%;">
			<el-form :model="formInline" class="demo-form-inline" label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="项目名称">
							<el-input
									disabled
									v-model="formInline.projectName"
									placeholder="项目名称"
							/> </el-form-item
						></el-col>
					<el-col :span="12">
						<el-form-item label="年度">
							<el-input
									disabled
									v-model="formInline.year"
									placeholder="年度"
							/> </el-form-item
						></el-col>
					<el-col :span="12">
						<el-form-item label="季度">
							<el-input
									v-model="formInline.quarter"
									disabled
									placeholder="季度"
							/> </el-form-item
						></el-col>
					<el-col :span="12">
						<el-form-item label="编制部门">
							<el-input
									v-model="formInline.departmentName"
									disabled
									placeholder="编制部门"
							/> </el-form-item
						></el-col>
				</el-row>
			</el-form>
			<div style="width: 100%">
				<el-table :data="formInline.detail" style="width: 100%">
					<el-table-column prop="monthly" label="季度(月)" />
					<el-table-column prop="projectRelativeName" label="相关项目" />
					<el-table-column prop="contractName" label="相关合同" />
					<el-table-column prop="subjectName" label="资金预算科目" />
					<el-table-column prop="budgetAmount" label="预算金额" />
					<el-table-column prop="realAmount" label="实际金额" />
				</el-table>
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer d-flex a-center j-center">
				<el-button @click="state.centerDialogVisible = false" class="button_cancel2">取消</el-button>
				<el-button type="primary" @click="state.centerDialogVisible = false">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup>
import { managementApi } from "@/api/investment.js";
import { ref, reactive, watch } from "vue";
import {
	ElDialog,
	ElButton,
	ElForm,
	ElFormItem,
	ElTable,
	ElTableColumn,
	ElCol,
	ElRow,
} from "element-plus";
const state = reactive({
	centerDialogVisible: false,
	tableData: [],
});
watch(
	() => state.centerDialogVisible,
	(val) => {
		if (!val) {
			formInline.value = {
				detail: [],
			};
		}
	}
);
const formInline = ref({
	detail: [],
});

const getData = (param) => {
	managementApi.getManagementView(param).then((res) => {
		if (res.code == 200 && res.data) {
			formInline.value = res.data;
		}
	});
};

defineExpose({
	state,
	getData,
});
</script>
<style lang="scss" scoped></style>
